<template>
  <div class="comment">
    <div class="left">
      <img :src="'http://localhost:8010/getImage?name='+this.commentObj.avaterUrl" alt />
    </div>
    <div class="right">
      <div class="headline">
        <span>{{commentObj.nickname}}</span> &ensp;
        <span>LV.{{commentObj.level}}</span>

        <div class="r">{{ind}}F</div>
        <div class="l">
          <el-rate disabled v-model="commentObj.scenComment.rate" show-text></el-rate>
        </div>
      </div>
      <div class="content">{{commentObj.scenComment.content}}</div>
      <div class="imgs" v-if="commentObj.scenComment.imgs">
        <el-image
          style="width: 100px; height: 100px"
          v-for="(item,index) in commentObj.scenComment.imgs.split(':')"
          :key="index"
          :src="'http://localhost:8010/getImage?name='+item"
          :preview-src-list="imgslist"
        ></el-image>
        <div v-if="imgslist.length"></div>
      </div>
      <div class="footer">
        <div class="l">{{cdate}}</div>
        <div
          class="r"
          v-if="commentObj.scenComment.uid==$store.state.user.userInfo.user.uid"
          @click="delete_comment(ind)"
        >删除</div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    commentObj: {
      style: Object,
      default: {
        comment: {},
        avaterUrl: "",
        nickname: "",
        to_createdate: "",
        to_nickname: "",
        level: 0
      }
    },

    ind: {
      style: String
    }
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      cdate: "",
      to_createdate: "",
      isvisible: false,
      return_com: "",
      imgslist: []
    };
  },
  mounted() {
    // console.log("hello");

    let s = this.commentObj.scenComment.imgs.split(":");
    s.forEach(row => {
      this.imgslist.push("http://localhost:8010/getImage?name=" + row);
    });
    // console.log(this.imgslist);
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // getImgUrls(list) {
    //   let l = JSON.parse(JSON.stringify(list));
    //   l.forEach(row => {
    //     row = "http://localhost:8010/getImage?name=" + row;
    //   });
    //   console.log(l);
    //   return l;
    // },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    delete_comment(ind) {
      this.$axios
        .get("/api2/scenComment/delete?id=" + this.commentObj.scenComment.id)
        .then(res => {
          this.$store.dispatch(
            "commons/getComments",
            this.$store.state.commons.spot.sid
          );
          location.reload();
        });
    }
  },
  created() {
    // window.console.log(this.commentObj);
    this.cdate = this.dateFormat(
      "YYYY-mm-dd HH:MM",
      new Date(this.commentObj.scenComment.dateComment)
    );
  }
};
</script>

<style lang="less" scoped>
.comment {
  display: block;
  margin: 20px auto;
  width: 950px;
  background: white;
  .left {
    // background: red;
    display: inline-block;
    position: relative;
    width: 100px;
    min-height: 100px;
    vertical-align: top;
    img {
      position: absolute;
      height: 48px;
      width: 48px;
      border-radius: 100px;
      top: 20px;
      left: 20px;
      border: 1px solid rgb(255, 255, 255);
    }
  }
  .right {
    display: inline-block;
    position: relative;
    width: 800px;
    min-height: 150px;
    .headline {
      position: absolute;
      top: 10px;
      height: 48px;
      width: 780px;
      color: #27c18f;
      .r {
        // display: inline-block;
        color: #999;
        float: right;
      }
      .l {
        // display: inline-block;
        // position: absolute;
        float: right;
        margin-right: 10px;
        // top: 2px;
        // left:5px;
      }
    }
    .content {
      width: 780px;
      padding: 20px 0px;
      padding-top: 58px;
      color: black;
      .s {
        padding-bottom: 10px;
      }
    }
    .imgs {
      width: 750px;
      /deep/.el-image {
        // object-fit: cover;
        margin-right: 5px;
      }
      // background: #999;
    }
    .footer {
      width: 788px;
      bottom: 0px;
      .l {
        display: inline-block;
        color: #999;
        font-size: 15px;
      }
      .r {
        // display: inline-block;
        color: #0078d7;
        // right: 0px;
        // margin-left: 600px;
        float: right;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .returnbox {
      width: 780px;
      border: 4px solid lightblue;
    }
  }
}
</style>